<template>
  <div>
   <van-nav-bar
  title="黑马头条-登录"
/>
<van-form @submit="onSubmit">
  <van-field
    required
    v-model="mobile"
    name="mobile"
    label="手机号"
    placeholder="请输入手机号"
    :rules="[{ required: true, message: '请填写手机号',pattern: /^1[3456789]\d{9}$/}]"
  />
  <van-field
    required
    v-model="code"
    name="code"
    label="验证码"
    placeholder="请输入验证码"
    :rules="[{ required: true, message: '请填写6位验证码',pattern: /^\d{6}$/}]"
  />
  <div style="margin: 16px;">
    <van-button
    round block
    type="info"
    :loading="isLoading"
    :disabled="isLoading"
    native-type="submit"
    loading-text="登录ing..." >登录</van-button>
  </div>
</van-form>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  name: 'HM-Login',
  data () {
    return {
      mobile: '13888888888',
      code: '246810',
      isLoading: false // 登录加载状态
    }
  },
  methods: {
    ...mapActions(['loginActions']), // map方法调用actions的方法
    async onSubmit (values) {
      // values==>{mobile: '13888888888',code: '246810'}
      this.isLoading = true // 请求网络成功之前加载中
      try {
        // await LoginAPI(values)
        // this.$store.dispatch('loginActions', values)
        await this.loginActions(values)
        // 加载成功弹框
        this.$Notify({ type: 'success', message: '登录成功' })
        // 登录成功跳转到首页
        this.$router.replace('/layout')
      } catch (err) {
        // 加载失败弹框
        this.$Notify({ type: 'warning', message: '登录失败！请核对手机号或验证码' })
      }
      this.isLoading = false // 请求网络成功之后关闭加载状态
    }
  }
}
</script>

<style scoped>
  /* .van-nav-bar{
    background:#007bff ;

  }
  ::v-deep .van-nav-bar__title {
    color:white;
  } */

</style>
